<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>详情页</title>
		<link rel="stylesheet" href="./css/shop.css">
	</head>

	<body>
		<header>
			<div class="center">
				<div class="center_left">
					<span>让旅行更幸福</span>
					<span>Language</span>
					<span></span>
					<span>网站无障碍</span>
				</div>
				<div class="center_right">
					<ul>
						<li>
							<h4 id="come"><a href="javascript:;">欢迎! <span>xxx</span>登录</a></h4>
							<p id="log"><a href="javascript:;">您好，请登录</a></p>
						</li>
						<li>消息</li>
						<li>我的携程</li>
						<li>我的订单</li>
						<li>客服中心</li>
						<li></li>
					</ul>
				</div>
			</div>
		</header>

		<div class="logo center">
			<img src="./trip/beijing/logo.png">
			<div class="inp"></div>
			<div class="number">
				<span>境内：95010</span>
				<span>(或)400-830-6666</span>
			</div>
		</div>

		<div class="banner">
			<div class="center">
				<ul>
					<li>首页</li>
					<li>酒店</li>
					<li>旅游</li>
					<li>跟团游</li>
					<li>自行游</li>
					<li>机票</li>
					<li>火车</li>
					<li>汽车.船</li>
					<li>用车</li>
					<li>门票</li>
					<li>攻略</li>
					<li>全球购</li>
					<li>礼品卡</li>
					<li>商旅</li>
					<li>邮轮</li>
					<li>目的地</li>
					<li>金融</li>
					<li>更多</li>
				</ul>
			</div>
		</div>
		
		<div class="info center">
			<table cellspacing="0" align="center">
				<thead align="center">
					<tr>
						<td>商品</td>
						<td>原图</td>
						<td>单价</td>
						<td>数量</td>
						<td>小计</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody align="center">
					
				</tbody>
				<tfoot align="center">
					<tr>
						<td colspan="6">总价:
							<span id="money">0元</span>
						</td>
					</tr>
				</tfoot>
			</table>
		</div>
		
	</body>
</html>
<script src="./lib/jquery.min.js"></script>
<script src="./js/cookie.js"></script>
<script>
	var username = getCookie('username')
    if(username != "") {
		$('#come').css('display','block');
		$('#log').css('display','none');
        $('#come > a > span').html(username);
    } else {
		$('#come').css('display','none');
		$('#log').css('display','block');
    }
	$('#come > a').on('click',function() {
		location.href = 'index.html';
	})
	// let data = [
	// 	{"product":"标准大床房","img":"./imgs/h1.jpg","price":"7999元","num":1,"sum":"876元"},
	// 	{"product":"高级大床房","img":"./imgs/h2.jpg","price":"1999元","num":1,"sum":"954元"},
	// 	{"product":"高级小套房","img":"./imgs/h3.jpg","price":"4999元","num":1,"sum":"1697元"},
	// 	{"product":"北京朝阳丽婷酒店","img":"./imgs/h4.jpg","price":"5999元","num":1,"sum":"353元"},
	// 	{"product":"北京行宫国际酒店","img":"./imgs/h5.jpg","price":"6999元","num":1,"sum":"648元"},
	// ]

	getData()
	// 数据渲染到页面，有多少条数据，就遍历多少次
	function getData() {
		$.get('./php/getGoodsList.php',
		{"typeId":"010"},function(data) {
			let arr = JSON.parse(data);
			let str = '';
			arr.forEach(function (item, index) {
				str += `
					<tr>
						<td>${item.goodsName}</td>
						<td><img src="${item.goodsImg}"></td>
						<td>${item.goodsPrice}</td>
						<td> <input type="button" value="-" class="minusnum btn">
							<input class="txt" type="text" size="2" value="${item.goodsCount}">
							<input type="button" value="+" class="addnum btn">
						</td>
						<td class="xj">${item.goodsDesc}</td>
						<td><input type="button" value="删除" class="delnum del"></td>
					</tr> 
				`
			})
			$('tbody').html(str)
		})
	}

	$('table').on('click', '.addnum', function() {
		let num = $(this).prev().val()
		num++;
		$(this).prev().val(num)
		let price = parseInt($(this).parent().prev().text())
		$(this).parent().next().text(price * num + '元')
		// 总价变化
		getSum()
	})
	
	$('table').on('click', '.minusnum', function() {
		let num = $(this).next().val()
		num--;
		if(num <= 1) num = 1;
		$(this).next().val(num)
		let price = parseInt($(this).parent().prev().text())
		$(this).parent().next().text(price * num + '元')
		// 总价变化
		getSum()
	})

	$('table').on('click','.delnum',function(){
		if(confirm('确定要删除吗？')) {
			$(this).parent().parent().remove();
		}
		getSum();
	})

	// 计算初始状态的小计和
	function getSum() {
		let sum = 0;
		// 遍历
		$('.xj').each(function(index, item) {
			sum += parseInt($(item).text())
		})
		$('#money').text(sum + "元")
	}
</script>

